<script lang="ts">
  import type { KeyValuePair } from "@sparrow/common/interfaces/request.interface";
  import { TabularInput } from "@sparrow/workspaces/components";
  import { createDeepCopy } from "@sparrow/common/utils/conversion.helper";
  import MixpanelEvent from "@app/utils/mixpanel/MixpanelEvent";
  import { Events } from "@sparrow/common/enums";
  import { Loader, Toggle } from "@sparrow/library/ui";

  export let environmentVariables = [];
  export let onHeadersChange;
  export let onAutoGeneratedHeadersChange;
  export let headers;
  export let autoGeneratedHeaders;
  export let authHeader;
  export let onUpdateEnvironment;

  export let isMergeViewEnabled = false;
  export let isMergeViewLoading = false;
  export let newModifiedContent: KeyValuePair[];

  export let isBulkEditActive;
  export let onUpdateRequestState;
  let isBulkEditRequired = true;
  let isBulkEditHeaderInfoRequired = true;

  //   let placeholderHeader=`Usage: Use bulk edit to manage multiple Headers quickly. Separate each entry with a new line.
  // Format: Header-Key: Header-Value
  // Example: userID: Sparrow12`

  let placeholderHeader =
    "Usage - Manage multiple headers.  Format - Key: Value";

  let showGeneratedHeader: boolean = false;

  const handleHeaderChange = (pairs: KeyValuePair[]): void => {
    onHeadersChange(pairs);
  };

  const handleAutoGeneratedChange = (pairs: KeyValuePair[]): void => {
    onAutoGeneratedHeadersChange(pairs);
  };

  const toggleBulkEdit = (value) => {
    MixpanelEvent(Events.Bulk_Edit_Headers);

    onUpdateRequestState({ isHeaderBulkEditActive: value });
  };
</script>

{#if isMergeViewLoading}
  <div
    class=""
    style="top: 0px; left: 0; right: 0; bottom: 0; z-index:3; position:absolute;"
  >
    <Loader loaderSize={"20px"} />
  </div>
{/if}
<section class="w-100" style="">
  <TabularInput
    {isBulkEditRequired}
    bulkEditPlaceholder={placeholderHeader}
    {isBulkEditHeaderInfoRequired}
    {isBulkEditActive}
    onToggleBulkEdit={toggleBulkEdit}
    keyValue={createDeepCopy(headers)}
    callback={handleHeaderChange}
    {environmentVariables}
    {onUpdateEnvironment}
    bind:isMergeViewLoading
    bind:showMergeView={isMergeViewEnabled}
    bind:newModifiedPairs={newModifiedContent}
  />

  <div>
    {#if !isBulkEditActive}
      <div class="d-flex align-items-center" style="padding:12px 0px">
        <Toggle
          bind:isActive={showGeneratedHeader}
          label="Show auto-generated headers"
        />
      </div>
    {/if}
  </div>

  {#if showGeneratedHeader && !isBulkEditActive}
    <TabularInput
      isTopHeaderRequired={true}
      isInputBoxEditable={false}
      readable={authHeader}
      keyValue={createDeepCopy(autoGeneratedHeaders)}
      callback={handleAutoGeneratedChange}
      {environmentVariables}
      {onUpdateEnvironment}
      onToggleBulkEdit={() => {}}
    />
  {/if}
</section>

<style>
  .generated-para {
    font-size: 12px;
  }
  .custom-switch {
    position: relative;
    margin-top: 10px;
    display: inline-block;
    align-items: center;
    justify-content: center;
  }

  .custom-switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    border-radius: 100px;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-secondary-400);
    transition: 200ms;
    width: 30px;
    height: 14px;
  }

  .slider:before {
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    content: "";
    height: 10px;
    width: 10px;
    background-color: var(--bg-secondary-100);
    transition: 200ms;
  }

  input:checked + .slider {
    background-color: var(--bg-primary-300);
  }

  input:checked + .slider:before {
    background-color: var(--bg-secondary-100);
    transform: translateX(16px);
  }
</style>
